<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" type="text/css" href="../css/animate.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.main{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding: 10px;
			}
			.himg{
				width: 40px;
				height: 40px;
			}
			.himg img{
				width: 40px;
				height: 40px;
				border:1px solid #ccc;
				border-radius: 50%;
			}
			.m-himg{
				width: 100%;
				display: flex;
				align-items: center;
				position:relative;
				justify-content: space-between;
				padding: 15px 0;
				border-bottom: 1px solid #fff;
				color: #676664;
				font-family: "微软雅黑";
			}
			.htext{
				
				height: 40px;
				line-height: 40px;
			}
			input{
				border: 0 !important;
			}
			.mmyz{
				width: 100%;
				height: auto;
				background-color: white;
				position: absolute;
				background-color: #E7EFFE;
			}
			.sess{
				font-size: 10px;
				padding: 10px 20px;
			}
			.fc{
				display: flex;
				justify-content: flex-start;
				
				
			}
			.ft{border-bottom:1px solid #fff;
				padding:10px 0;
				margin:0 10px;
			}
			.h{
				height: 35px;
				width: 20% !important;
				
			}
			.fc>input{
				width: 80%;
			
			}
			.ft>input{
					background:transparent;
					margin:0;
			}
			.r-mian{
				position: absolute;
				background-color: white;
				width: 100%;
				min-height: 100%;
				height: auto;
				top: 0;
				left: 0;
				padding-top: 50px;
				background-color: #E7EFFE;
			}
			.butcss{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top:15px;
			}
			.butcss>button{
				width: 40%;
				height:2.5em;
				border-radius:20px;
			}
			.hbg{
				background-color: #7DB1FD;
			}
			.hbg a,.hbg h1{
				color: white;
			}
			.mui-content{
				min-height: 100vh;
				background-color: #E7EFFE;
			}
			.number{
				font-size: 0.8em;
			}
			.but{
				background-color: #7DB1FD;
				border: 1px solid #7DB1FD;
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">重置密码</h1>
		</header>
		
		
		
		<div class="mui-content" id="app">
			
			<div class="main" >
				
				<div class="m-himg" onclick="settype(1)">
					<div class="mui-navigate-right">
						密码验证
					</div>
					<!--<div class="htext">
						>
					</div>-->
				</div>
				<div class="m-himg" onclick="settype(2)">
					<div class="mui-navigate-right">
						<div class="">
							手机验证
						</div>
						<div class="number">
							136 **** 2450
						</div>
					</div>
					
					<!--<div class="htext ">
						>
					</div>-->
				</div>
				
			</div>
			<div id="setmain" class="r-mian mui-hidden">
				<div class="mmyz" id="mima">
					<div class="mui-input-row ft">
					    <input type="text" placeholder="请输入当前密码">
					   
					</div>
					<div class="mui-input-row ft">
					    <input type="text" placeholder="请输入新密码">
					</div>
					<div class="mui-input-row ft">
					    <input type="text" placeholder="请再次输入新密码">
					</div>
					<div class="butcss">
						<button type="button" class="mui-btn mui-btn-blue  but">完成</button>
						<button type="button" class="mui-btn mui-btn-blue  but" onclick="settype()">取消</button>
					</div>
				</div>
				
				<div class="mmyz" id="shouji">
					<div class="sess">
						
					</div>
					<div class="mui-input-row ft">
					    <input id="mob" type="text" placeholder="请输入手机号">
					</div>
					<div class="mui-input-row fc ft">
					    <input id="code" type="text" placeholder="请输入验证码">
					    <button type="button" class="mui-btn mui-btn-blue h but" id="cfbut">发送</button>
					</div>
					<div class="mui-input-row ft">
					    <input id="newpass" type="password" placeholder="请输入新密码">
					</div>
					
					<div class="butcss">
						<button type="button" class="mui-btn mui-btn-blue  but" onclick="setpass()">完成</button>
						<button type="button" class="mui-btn mui-btn-blue  but" onclick="settype()">取消</button>
					</div>
					
				</div>
			</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			let i = 0,flag = true;
			window.onload = function(){
				
			$("#cfbut").bind("click",function(){
				if(flag){
					let time;
					flag = !flag;
					$(".sess").html("验证码已发送到 ： 12322525245 请注意查收");
					time = setInterval(function(){
						i++;
						$("#cfbut").html("重发"+ i);
						if(i > 10){
							i = 0;
							 clearInterval(time);
							 $(".sess").html("如果验证码未收到，请重发");
							 flag = !flag;
							 $("#cfbut").html("重发");
						}
					},1000);
				}
			})
				
				
			}
			function settype(e){
				if(e==1){
					$("#mima").removeClass("bounceInUp mui-hidden");
					$("#shouji").addClass("mui-hidden");
					setTimeout(function(){
						$("#mima").addClass("animated bounceInUp");
						$("#setmain").removeClass("mui-hidden");
					},0)
				}else if(e == 2){
					$("#shouji").removeClass("bounceInUp mui-hidden");
					$("#mima").addClass("mui-hidden");
					setTimeout(function(){
						$("#shouji").addClass("animated bounceInUp");
						$("#setmain").removeClass("mui-hidden");
					},0)
				}else{
					$("#setmain").addClass("mui-hidden");
				}
			}
			
			function setpass(){
					var mob = document.getElementById('mob');
					var code = document.getElementById('code');
					var newpass = document.getElementById('newpass');
						var regInfo = {
							mob: mob.value,
							code: code.value,
							newpass: newpass.value
						};
						if("" == regInfo.mob || "" == regInfo.newpass){
							mui.toast('手机号或密码不能为空');
							return;
						}
						if("" == regInfo.code ){
							mui.toast('请输入验证码');
							return;
						}
						let data = {
						url:"/api/Login/update_password",
						data:{
							mobile:regInfo.mob,
							password:regInfo.newpass,
							code:regInfo.code
							},
						}
					ajax(data,function(res){
							console.log(res);
							if(res.code == -1){
								mui.toast(res.message);
							}
							if(res.code == 1){
								mui.toast("修改成功");
							}
						});	
			}
		</script>
	</body>

</html>